import React from 'react'
import {Card, CardBody, CardFooter, Col} from "reactstrap";
import {ArrowRightCircle, Calendar} from "react-feather";
import {NavLink} from "react-router-dom";
import {parseUnixTime, textSize} from "../../../helpers/utils";

const EventsItem = React.memo(props => {
  const {name, location, capacity, id, tags, begin} = props.data
  const optionsDate = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }
  const optionsTime = {
    hour: 'numeric',
    minute: 'numeric',
  }

  const dateBeginBig = begin
    ? `${parseUnixTime(begin).toLocaleString("ru", optionsDate)} в ${parseUnixTime(begin).toLocaleString("ru", optionsTime)} мск`
    : ''
  const dateBeginSmall = begin
    ? `${parseUnixTime(begin).toLocaleString("ru", {...optionsDate, ...optionsTime, month: 'numeric'})}`
    : ''


  return (
    <Col xs="12" md="6" className="mb-2 event-item">
      <Card className="mb-0 h-100">
          <div className="p-2 project-card-title">
            <div className="row">
              <div className={(tags && tags.data.length) ? 'col-sm-5' : ''}>
                <div className="event-item__tags">
                  {tags && tags.data.length > 0 &&
                    tags.data.map(item => (
                      <div className="chip mb-0 mr-25" key={item.id}>
                        <div className="chip-body">
                              <span className="chip-text">
                                <span className="text-capitalize mr-25 event-item__tag-name justify">
                                  {textSize(item.name, 10)}
                                </span>
                                <span className="bullet bullet-xs" style={{backgroundColor: item.color}}/>
                              </span>
                        </div>
                      </div>
                    ))
                  }
                </div>
              </div>
              <div className={`${(tags && tags.data.length) ? 'col-sm-7' : 'col-12 pl-md-1'} align-items-center event-item__date`}>
                {dateBeginBig &&
                  <div
                    className={`d-flex align-items-center flex-row-reverse flex-sm-row h-100 mt-75 mt-sm-0 ${(tags && tags.data.length) ? 'justify-content-end' : 'event-item__date-vn'}`}
                  >
                    <span className="event-item__date-big">{dateBeginBig}</span>
                    <span className="event-item__date-small">{dateBeginSmall}</span>
                    <Calendar className="fonticon-wrap" size={15}/>
                  </div>
                }
              </div>
            </div>
            <div className="event-item__title">
              <span>{name}</span>
            </div>
          </div>
        <CardBody className="px-2 py-0">
          <div className="d-flex justify-content-start project-card-content">
            <div className="event-item__option-title pr-1">
              <span>Место:</span>
            </div>
            <div className="event-item__option-value">
              <span>{location && location.name ? location.name : ''}</span>
            </div>
          </div>
          <div className="d-flex justify-content-start project-card-content">
            <div className="event-item__option-title pr-1">
              <span>Вместимость:</span>
            </div>
            <div className="event-item__option-value">
              <span>{capacity ? `${capacity} человек` : ''}</span>
            </div>
          </div>
        </CardBody>
        <CardFooter className="border-0 pt-0">
          <div className="event-item__more-details">
            <NavLink to={`/events/${id}/info`} className="event-item__link">
              <span>подробнее</span>
              <ArrowRightCircle className="fonticon-wrap" size={18}/>
            </NavLink>
          </div>
        </CardFooter>
      </Card>
    </Col>
  )
})

export default EventsItem
